


Ext.onReady(function() {


    /**
     * MODELS
     */



    // Model to represent presidential terms
    Ext.define('Contacts', {
        extend: 'Ext.data.Model',
        fields: [
            'id', 'first_name', 'last_name', 'email', 'phone'
        ],

        proxy: {
            type: 'ajax',
            url: 'contacts.json',
            reader: {
                type: 'json',
                root: 'contacts'
            }

        }

    });


    // Local store to house the contact records
    var contactStore = Ext.create('Ext.data.Store', {

        model: 'Contacts',
        autoLoad: true

    });




    /**
     * VIEWS
     */

    //first name
    var firstNameTF = Ext.create('Ext.form.Text', {

        fieldLabel: 'First Name',
        name: 'first_name',
        validator: nameValidator

    });

    //last name
    var lastNameTF = Ext.create('Ext.form.Text', {

        fieldLabel: 'Last Name',
        name: 'last_name',
        validator: nameValidator

    });

    //email
    var emailTF = Ext.create('Ext.form.Text', {

        fieldLabel: 'Email Address',
        name: 'email',
        validator: emailValidator

    });

    //phone
    var phoneTF = Ext.create('Ext.form.Text', {

        fieldLabel: 'Phone Number',
        name: 'phone',
        validator: phoneValidator

    });

    //clear
    var clearButton = Ext.create('Ext.Button', {

        text: 'Clear',
        handler: clearButtonHandler
    });

    //submit to local store
    var submitButton = Ext.create('Ext.Button', {

        formBind: true,
        text: 'Submit',
        handler: submitButtonHandler
    });

    //tb to hold buttons
    var toolbar = Ext.create('Ext.toolbar.Toolbar', {

        dock: 'bottom',
        items: ['->', '-', clearButton, '-', submitButton]
    });

    //basic form
    var form = Ext.create('Ext.form.Panel', {

        title: 'Contact Form Example',
        frame: true,
        width: 275,
        height: 180,
        renderTo: 'form',
        dockedItems: toolbar,
        items: [firstNameTF, lastNameTF, emailTF, phoneTF]
    });

    //view grid (shows the contents of store)
    var grid = Ext.create('Ext.grid.Panel', {

        store: contactStore,
        renderTo: 'grid',

        width: 600,
        height: 300,
        autoScroll: true,

        title: 'My Contacts',
        columns:[
            {header: 'First', dataIndex: 'first_name', width: 150},
            {header: 'Last', dataIndex: 'last_name', width: 150},
            {header: 'Email', dataIndex: 'email', width: 150},
            {header: 'Phone', dataIndex: 'phone', flex: 1}
        ]
    });


    /**
     * Controllers
     */

    //validate names
    function nameValidator(){

        if(!/[a-zA-Z]/.test(arguments[0])) return 'Name may only contain letters';
        return true;
    }

    //validate emails
    function emailValidator(){

        if(!/^[a-z A-Z 0-9]{3,9}@[a-z A-Z 0-9]{3,10}.[ceo][odr][mug]$/.test(arguments[0]))
            return 'Email must contain @ and . and must end in com, edu, or org';
        return true;
    }

    //validate phones
    function phoneValidator(){

        if(!/^[\d]{3}-[\d]{3}-[\d]{4}$/.test(arguments[0]))
            return 'Phone must only contain digits and be in the format of 555-555-5555';
        return true;
    }

    //clear the form
    function clearButtonHandler(){ form.getForm().reset(); }

    //create record and submit to store
    function submitButtonHandler(){


        //first get the form values
        var vals = form.getForm().getValues();

        //now create a record
        var rec = Ext.ModelMgr.create(vals, 'Contacts');

        //insert it at the beginning
        contactStore.insert(0, rec);

        //clear the form
        form.getForm().reset();
    }


});